﻿
@{
    ViewBag.Title = "MainTree";
    Layout = "~/Views/Shared/_MyLayoutPage.cshtml";
}

@section head{
    <link rel="stylesheet" href="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" />
    <link rel="stylesheet" href="~/Content/zTree_v3/css/demo.css" type="text/css" />
    <script type="text/javascript" src="~/Content/zTree_v3/js/jquery.ztree.all.js"></script>


    <style>
        html, body {
            /*position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            padding: 0;
            margin: 0;*/
            height: 100%;
            width: 100%;
        }

        .parent {
            display: flex;
            height: 100%;
            width: 100%;
        }

        .left {
            width: 400px;
            height: 100%;
            background-color: white;
        }

        .right {
            display: flex;
            flex: 1;
            height: 100%;
            background-color: whitesmoke;
        }
        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle
        }
    </style>
}

<div class="parent">
    <div class="left">
        <div>
            <ul id="treeDemo" class="ztree" style="width:100%;height:100%;"></ul>
        </div>
    </div>
    <div class="right">
        <div>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">根节点名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" id="NodeName" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                    </div>
                    @*<div class="layui-input-inline">
                    <input type="text" name="title" id="DrawNum" required lay-verify="required" placeholder="请输入编号" autocomplete="off" class="layui-input">
                </div>*@
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" id="AddRootBtn" lay-filter="formDemo">新增节点</button>
                    </div>
                </div>
            </form>
            <div>
                <ul style="list-style:none;list-style-type: none;">
                    <li style="font-size:20px;list-style-type:none;">选中的节点名称：<span id="SelNodeName"></span></li>
                    <li style="font-size:20px;list-style-type:none;">选中的节点编号：<span id="SelNodeNum"></span></li>
                    <li style="font-size:20px;list-style-type:none;">图纸序列编号：<span id="SelSerialNum"></span></li>

                </ul>

            </div>
        </div>



    </div>
</div>

<script type="text/javascript">


    var layer;
    layui.use(['form', 'table', 'upload', 'layer'], function () {
        var form = layui.form;
        var tab = parent.tab;
        var form = layui.form;
        layer = layui.layer;
        var index;



        //新增用户保存
        $("#AddRootBtn").on("click", function () {


            var NodeName = $("#NodeName").val();
            //var DrawNum = $("#DrawNum").val();
            if (NodeName == "") {
                alert("输入错误");
                return;
            }
            var data = {};
            data["NodeName"] = NodeName;
            //data["DrawNum"] = DrawNum;
            data["IsParent"] = 1;
            data["parentId"] = "0";

            $.ajax({
                type: "POST",
                url: "/Api/AddNodeRoot",
                async: false,
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data),
                success: function (msg) {
                    if (msg.result == "OK") {
                        layer.msg('新增成功', { icon: 6, time: 1000 });
                        var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
                        zTreeObj.destroy();
                     
                        var TreeJsonStr = msg.TreeObjStr;
                        TreeJson = JSON.parse(TreeJsonStr);
                        $.fn.zTree.init($("#treeDemo"), setting, TreeJson);


                    } else {
                        alert(msg.result);
                    }
                }
            });
        });
    });
</script>













<SCRIPT type="text/javascript">
    
    var setting = {
        //async: {
        //    enable: true,
        //    url: "../asyncData/getNodes.php",
        //    autoParam: ["id", "name=n", "level=lv"],
        //    otherParam: { "otherParam": "zTreeAsyncTest" },
        //    dataFilter: filter
        //},
        view: {
            expandSpeed: "",
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
            
        },
        edit: {
            enable: true,
            showRemoveBtn: false,
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            //beforeRemove: beforeRemove,
            onRename: zTreeOnRename,
            onClick: zTreeOnClick,
            beforeRemove: zTreeBeforeRemove,
            //onNodeCreated: zTreeOnNodeCreated,
            //beforeRename: zTreeBeforeRename,
        }
    };
    var newCount = 1;
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_" + treeNode.tId);

        //新增节点
        if (btn) btn.bind("click", function () {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");

            var data = {};
            data["NodeName"] = "新增节点";
            //data["DrawNum"] = 0;
            data["IsParent"] = 0;
            data["ParentId"] = treeNode.Id;
            index = layer.open({
                shade: 0,
                content: '<i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>'
            });
            $.ajax({
                type: "POST",
                url: "/Api/AddNodeChildren",
                async: false,
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data),
                success: function (msg) {
                    if (msg.result == "OK") {
                        layer.close(index);
                        zTree.addNodes(treeNode, {
                            id: (100 + newCount), pId: treeNode.id, name: msg.NodeName, ParentId: msg.ParentId,
                            Id: msg.Id, DrawNum: msg.DrawNum
                        });
                    } else {
                        alert(msg.result);
                    }
                }
            });

            return false;
        });
    };
    function removeHoverDom(treeId, treeNode) {

        $("#addBtn_" + treeNode.tId).unbind().remove();
    };

    function zTreeOnRename(event, treeId, treeNode, isCancel) {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        if (treeNode.NodeName == treeNode.name)
        {
            
        }
        else if (treeNode.name == "")
        {       
            treeNode.name = treeNode.NodeName;            
        }
        else
        {
            //从后台更新操作
            var data = {};
            data["NodeName"] = treeNode.name;
            data["Id"] = treeNode.Id;
            index = layer.open({
                shade: 0,
                content: '<i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>'
            });
            $.ajax({
                type: "POST",
                url: "/Api/UpdateNode",
                async: false,
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data),
                success: function (msg) {
                    if (msg.result == "OK") {
                        layer.close(index);
                    } else {
                        alert(msg.result);
                        return;
                    }
                }
            });

        }
        treeObj.updateNode(treeNode);
        
    }

    function zTreeOnClick(event, treeId, treeNode) {
        //alert(treeNode.tId + ", " + treeNode.name + ", " + treeNode.ParentId + ", " + treeNode.NodeName);

        var data = {};
        data["Id"] = treeNode.Id;
        $.ajax({
            type: "POST",
            url: "/Api/GetAllTreeByNode",
            async: false,
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(data),
            success: function (msg) {
                if (msg.result == "OK") {
                    $("#SelNodeName").text(msg.NodeNameSerial);
                    $("#SelNodeNum").text(treeNode.DrawNum);
                    $("#SelSerialNum").text(msg.DrawNumSerial);

                } else {
                    alert(msg.result);
                    return;
                }
            }
        });



    };

    function zTreeBeforeRemove(treeId, treeNode) {
        return false;
    }

    function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
        layer.open({
            content: '确定修改？'
            , btn: ['确定', '取消']
            , yes: function (index, layero) {
                //按钮【按钮一】的回调
            }
            , btn2: function (index, layero) {
                //按钮【按钮二】的回调
                layer.close(index);
                //return false 开启该代码可禁止点击该按钮关闭
            }
            , cancel: function () {
                //右上角关闭回调

                //return false 开启该代码可禁止点击该按钮关闭
            }
        });

        //alert("确定需要改名么");
        return newName.length > 1;
    }


    var iconpath = "/Content/zTree_v3/css/zTreeStyle/img/diy/2.png"
    var zNodes = [
        {
            name: "父节点1 - 展开", open: true,
            children: [
                {
                    name: "父节点11 - 折叠", icon: iconpath,
                    children: [
                        { name: "叶子节点111" ,children:""},
                        { name: "叶子节点112" },
                        { name: "叶子节点113" },
                        { name: "叶子节点114" }
                    ]
                },
                {
                    name: "父节点12 - 折叠",
                    children: [
                        { name: "叶子节点121" },
                        { name: "叶子节点122" },
                        { name: "叶子节点123" },
                        { name: "叶子节点124" }
                    ]
                },
                { name: "父节点13 - 没有子节点", isParent: true }
            ]
        },
        {
            name: "父节点2 - 折叠",
            children: [
                {
                    name: "父节点21 - 展开", open: true,
                    children: [
                        { name: "叶子节点211" },
                        { name: "叶子节点212" },
                        { name: "叶子节点213" },
                        { name: "叶子节点214" }
                    ]
                },
                {
                    name: "父节点22 - 折叠",
                    children: [
                        { name: "叶子节点221" },
                        { name: "叶子节点222" },
                        { name: "叶子节点223" },
                        { name: "叶子节点224" }
                    ]
                },
                {
                    name: "父节点23 - 折叠",
                    children: [
                        { name: "叶子节点231" },
                        { name: "叶子节点232" },
                        { name: "叶子节点233" },
                        { name: "叶子节点234" }
                    ]
                }
            ]
        },
        { name: "父节点3 - 没有子节点", isParent: true }

    ];

    var TreeJson = {};
    var TreeJsonStr = '@Html.Raw(ViewBag.TreeJsonStr)';
    TreeJson = JSON.parse(TreeJsonStr);

    $(document).ready(function () {
        //$.fn.zTree.init($("#treeDemo"), setting, zNodes);
        $.fn.zTree.init($("#treeDemo"), setting, TreeJson);
    });
        //-->
</SCRIPT>